<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <title>Circle tag generator</title>
    <link rel="icon" type="image/x-icon" href="./favicon.ico" />
    <link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/spectrum/1.0.8/spectrum.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/materialize/0.100.2/css/materialize.min.css" rel="stylesheet">
    <link href="./css/circle-tag.css" rel="stylesheet">
    <link href="./css/main.css" rel="stylesheet">
</head>

<body>

    <div id="app" v-cloak>
        <!-- START Nav -->
        <nav>
            <ul id="dropdown1" class="dropdown-content">
                <li><a href="#!">one</a></li>
                <li><a href="#!">two</a></li>
                <li class="divider"></li>
                <li><a href="#!">three</a></li>
            </ul>
            <div class="nav-wrapper">
                <a href="#!" class="brand-logo">Circle Tag generator</a>
                <ul class="right hide-on-med-and-down">
                    <li><a href="#" @click="showCode">Generate Code</a></li>
                </ul>
            </div>
        </nav>
        <!-- END Nav -->

        <!-- START container -->
        <div class="container">
            <div class="row">
                <div class="col s5 box box-l">
                    <h4>Common options</h4>
                    <section>
                        <div class="row f-df-ac">
                            <div class="col s4">outerBoxRadius:(px)</div>
                            <div class="col s8">
                                <input placeholder="textContent" type="text" class="validate" v-model="options.outerBoxRadius">
                            </div>
                        </div>
                        <div class="row f-df-ac">
                            <div class="col s4">innerBoxRadius:(px)</div>
                            <div class="col s8">
                                <input placeholder="textContent" type="text" class="validate" v-model="options.innerBoxRadius">
                            </div>
                        </div>
                    </section>

                    <h4>OuterCircle options</h4>
                    <a class="waves-effect waves-light btn" @click="addOuterCircle"><i class="material-icons left">add</i>Add</a>
                    <a class="waves-effect waves-light btn" @click="deleteOuterCircle"><i class="material-icons left">delete</i>Delete</a>

                    <section class="option-outer" v-for="item,index in initData.outerData">
                        <div class="row f-df-ac">
                            <div class="col s4">TextContent:</div>
                            <div class="col s8">
                                <input placeholder="textContent" type="text" class="validate" v-model="item.text">
                            </div>
                        </div>
                        <div class="row f-df-ac">
                            <div class="col s4">TagBgColor:</div>
                            <div class="col s8">
                                <input type='text' :data-color="item.bgColor" class="tag-bg-color" @change="changeTagBgColor" />
                            </div>
                        </div>
                        <div class="row f-df-ac">
                            <div class="col s4">TagColor:</div>
                            <div class="col s8">
                                <input type='text' :data-color="item.textColor" class="tag-color" @change="changeTagColor" />
                            </div>
                        </div>
                        <div class="row f-df-ac">
                            <div class="col s4">TagRadius:(px)</div>
                            <div class="col s8">
                                <input placeholder="TagRadius: (px)" id="TagRadius" type="text" class="validate" v-model="item.radius" />
                            </div>
                        </div>
                    </section>


                    <h4>InnerCircle options</h4>
                    <a class="waves-effect waves-light btn" @click="addInnerCircle"><i class="material-icons left">add</i>Add</a>
                    <a class="waves-effect waves-light btn" @click="deleteInnerCircle"><i class="material-icons left">delete</i>Delete</a>

                    <section class="option-outer" v-for="item,index in initData.innerData">
                        <div class="row f-df-ac">
                            <div class="col s4">TextContent:</div>
                            <div class="col s8">
                                <input placeholder="textContent" id="textContent" type="text" class="validate" v-model="item.text">
                            </div>
                        </div>
                        <div class="row f-df-ac">
                            <div class="col s4">TagBgColor:</div>
                            <div class="col s8">
                                <input type='text' :data-color="item.bgColor" class="tag-bg-color" @change="changeTagBgColor" />
                            </div>
                        </div>
                        <div class="row f-df-ac">
                            <div class="col s4">TagColor:</div>
                            <div class="col s8">
                                <input type='text' :data-color="item.textColor" class="tag-color" @change="changeTagColor" />
                            </div>
                        </div>
                        <div class="row f-df-ac">
                            <div class="col s4">TagRadius:(px)</div>
                            <div class="col s8">
                                <input placeholder="TagRadius: (px)" id="TagRadius" type="text" class="validate" v-model="item.radius" />
                            </div>
                        </div>
                    </section>


                </div>
                <div class="col s7 box box-r">
                    <div class="m-circle">
                        <div class="circle-outer">
                        </div>
                        <div class="circle-inner">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END container -->

        <!-- START pop -->
        <div class="m-cover" v-show="isCover">
            <section class="container">
                <div class="g-icon">
                    <i class="icon icon-close" @click="closeCode"></i>
                </div>
                <div class="desc">
                    <div>STEP1: Link in circle-tag.css.</div>
                    <pre>&ltlink rel="stylesheet" href="./css/circle-tag.css"&gt</pre>

                    <div>STEP2: Link in Zepto and circle-tag.js</div>
                    <pre>&ltlink rel="stylesheet" href="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"&gt<br>&ltlink rel="stylesheet" href="./js/circle-tag.js"&gt</pre>

                    <div>STEP3: Fill in HTML structure.</div>
                    <div>
                        <pre>
&ltdiv class="m-circle"&gt
    &ltdiv class="circle-outer"&gt
    &lt/div&gt
    &ltdiv class="circle-inner" &gt
    &lt/div&gt
&lt/div&gt</pre>
                    </div>

                    <div>STEP4: Init circle-tag module.</div>
                    <pre class="code-js"></pre>
                </div>
            </section>
        </div>
        <!-- END pop -->

    </div>

    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/materialize/0.100.2/js/materialize.min.js"></script>
    <script src="https://cdn.bootcss.com/spectrum/1.0.8/spectrum.js"></script>
    <script src="./js/circle-tag.js"></script>
    <script src="./js/main.js"></script>

</body>

</html>